<template>
    <transition name="appear">
        <section class="toast" v-if="show" :class="type">
            <i class="el-icon-success" v-if="type == 'success'" />
            <i class="el-icon-warning" v-if="type == 'error'" />
            <div v-html="message" class="toast-con"></div>
        </section>
    </transition>
</template>

<script>
export default {
    name: "toast",
    data() {
        return {
            msg: '',
            show: false,
            message: '',
            type: 'info',
            time: 1000
        }
    },
    watch: {
        msg(val) {
            if (typeof val == 'object') {
                this.message = val.message
                this.type = val.type
            } else {
                this.message = val
                this.type = 'info'
            }
        }
    },
    methods: {
        async open() {
            if (this.show) {
                return;
            }
            this.show = true;
            let result = await this.close();
            return result;
        },
        close() {
            return new Promise((resolve) => {
                setTimeout(() => {
                    this.show = false;
                    resolve(true);
                }, this.time);
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.toast {
    position: fixed;
    background-color: rgba(51, 51, 51, 0.8);
    color: white;
    border-radius: 5px;
    padding: 15px;
    transition: opacity 0.35;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    text-align: center;
    z-index: 9999;

    &.success {
        background: linear-gradient(180deg, #D6E4FF 0%, #FFFFFF 100%);
        box-shadow: 0px 0px 6px 0px rgba(36, 111, 255, 0.5);
        color: #333;

        i {
            color: rgb(36, 111, 255);
        }
    }

    &.error {
        background: linear-gradient(180deg, #FFE5E4 0%, #FFFFFF 100%);
        box-shadow: 0px 0px 6px 0px rgba(246, 98, 94, 0.5);
        color: #333;

        i {
            color: rgb(246, 98, 94);
        }
    }

    i {
        font-size: 28px;
        margin-bottom: 8px;
    }
}
</style>
